<template>
  <div class="risk-compliance c-shadow">
    <jTabNav>
      <div slot="tabcontent" class="tab">
        <ul v-if="tabList.length">
          <li v-for="(item,index) in tabList" :key="index" @click="changenum(item)" :class="{tabAlink:item.flag}">
            {{item.year}}
            年度
          </li>
        </ul>
        <ul v-else>
          <li class="tab-alink gray cursor">
            {{message}}
          </li>
        </ul>
      </div>
    </jTabNav>
    <!-- <span v-if="!annuaInfo.numSize">0</span><span v-else>1</span> -->
    <h4 class="detail-base-title d_jump">企业基本信息<span>{{annuaInfo.numSize ? 1 : 0}}</span></h4>
    <j-no-data v-if="!annuaInfo.numSize" :mode="'b'" msg="b"></j-no-data>
    <div v-else class="table-wrap">
      <table class="business">
        <tr>
          <th>注册号</th>
          <td>{{annuaInfo.codeOrRegistationNo || '--'}}</td>
          <th>企业名称</th>
          <td>{{annuaInfo.name || '--'}}</td>
        </tr>
        <tr>
          <th>企业联系电话</th>
          <td>{{annuaInfo.enterprisePhone || '--'}}</td>
          <th>邮政编码</th>
          <td>{{annuaInfo.postCode || '--'}}</td>
        </tr>
        <tr>
          <th>企业通讯地址</th>
          <!-- TODO: -->
          <td colspan="3" class="long">{{annuaInfo.address || '--'}}</td>
        </tr>
        <tr>
          <th>电子邮箱</th>
          <td>{{annuaInfo.email || '--'}}</td>
          <th>有限责任公司本年度是否发生股东股权转让</th>
          <td>{{annuaInfo.ownShareChange || '--'}}</td>
        </tr>
        <tr>
          <th>企业经营状态</th>
          <td>{{annuaInfo.operateStatus || '--'}}</td>
          <th>是否有网站或者网店</th>
          <td>{{annuaInfo.ownWebsite || '--'}}</td>
        </tr>
        <tr>
          <th>企业是否有投资信息或购买其他公司股权</th>
          <td>{{annuaInfo.ownInvestmentOrMerger || '--'}}</td>
          <th>从业人数</th>
          <td>{{annuaInfo.employeeNumber || '--'}}</td>
        </tr>
      </table>
    </div>
     <h4 class="detail-base-title d_jump" v-if="annuaShareholderInvestmentInfos.length">股东（发起人）及出资信息<span>{{annuaShareholderInvestmentInfos.length || 0}}</span></h4>
    <div v-if="annuaShareholderInvestmentInfos.length" class="table-wrap">
      <table>
        <thead>
          <tr>
            <th v-for="title in shareholderTitle" :key="title">{{title}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in annuaShareholderInvestmentInfos" :key="index">
            <td>
              <router-link tag="a" target="_blank" :to="{name:'baseinfoa', query: {entname:item.name}}" class="blue">
                {{item.name || '--'}}
              </router-link>
            </td>
            <td>{{item.subscribedAmountSum || '--'}}</td>
            <td>{{item.subscribedDate | dateFormat}}</td>
            <td>{{item.subscribedType || '--'}}</td>
            <td>{{item.paidAmountSum || '--'}}</td>
            <td>{{item.paidDate | dateFormat}}</td>
            <td>{{item.paidType || '--'}}</td>
          </tr>
        </tbody>
      </table>
      <!-- <div class="block paging-wrap fr">
        <el-pagination v-if="annuaShareholderInvestmentInfos.total>5"
          @size-change="courtSizeChange"
          @current-change="courtCurrentChange"
          :current-page.sync="annuaShareholderInvestmentInfos.pageNum"
          :page-size="annuaShareholderInvestmentInfos.pageSize"
          layout="prev, pager, next, jumper"
          :total="annuaShareholderInvestmentInfos.total">
        </el-pagination>
      </div> -->
    </div>
    <h4 class="detail-base-title d_jump" v-if="annuaWebsiteInfos.length">网站或网店信息<span>{{annuaWebsiteInfos.length || 0}}</span></h4>
    <div class="table-wrap" v-if="annuaWebsiteInfos.length">
      <table>
        <thead>
          <tr>
            <th v-for="title in shareholderTitle1" :key="title">{{title}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in annuaWebsiteInfos" :key="index">
            <td>{{item.categary || '--'}}</td>
            <td>{{item.name || '--'}}</td>
            <td>
              <a :href="item.hrefUrl" target="_blank">
                {{item.url || '--'}}
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <h4 class="detail-base-title d_jump" v-if="annuaOutInvestmentInfos.length">对外投资信息<span>{{annuaOutInvestmentInfos.length || 0}}</span></h4>
    <div class="table-wrap" v-if="annuaOutInvestmentInfos.length">
      <table>
        <thead>
          <tr>
            <th v-for="title in Outbound" :key="title">{{title}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in annuaOutInvestmentInfos" :key="index">
            <td>
              <router-link tag="a" target="_blank" :to="{name:'baseinfoa', query: {entname:item.enterpriseName}}" class="blue">
                {{item.enterpriseName || '--'}}
              </router-link>
            </td>
            <td>{{item.registationNo || '--'}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- <span v-if="!annuaPropertyAssetInfos.numSize">0</span><span v-else>1</span> -->
    <h4 class="detail-base-title d_jump">企业资产状况信息<span>{{annuaPropertyAssetInfos.numSize}}</span></h4>
    <j-no-data v-if="!annuaPropertyAssetInfos.numSize" :mode="'b'" msg="b"></j-no-data>
    <div class="table-wrap" v-else>
      <table class="business">
        <tr>
          <th>资产总额</th>
          <td>{{annuaPropertyAssetInfos.totalAssets || '--'}}</td>
          <th>所有者权益合计</th>
          <td>{{annuaPropertyAssetInfos.totalOwnersEquity || '--'}}</td>
        </tr>
        <tr>
          <th>负债总额</th>
          <td>{{annuaPropertyAssetInfos.totalLiabilities || '--'}}</td>
          <th>营业总收入</th>
          <td>{{annuaPropertyAssetInfos.grossTradingIncome || '--'}}</td>
        </tr>
        <tr>
          <th>利润总额</th>
          <td>{{annuaPropertyAssetInfos.totalProfit || '--'}}</td>
          <th>营业总收入中主营业务收入</th>
          <td>{{annuaPropertyAssetInfos.mainBusinessIncome || '--'}}</td>
        </tr>
        <tr>
          <th>净利润</th>
          <td>{{annuaPropertyAssetInfos.netProfit || '--'}}</td>
          <th>纳税总额</th>
          <td>{{annuaPropertyAssetInfos.totalTaxAmount || '--'}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import { jTabNav, jNoData } from '../../components'
import { sysSetting as api } from '../../api'
export default {
  data() {
    return {
      tabList: [],
      annuaData: {},
      message:'加载中，请稍后...',
      annuaInfo:{},
      annuaShareholderInvestmentInfos:[],
      annuaWebsiteInfos:[],
      annuaOutInvestmentInfos: [],
      annuaPropertyAssetInfos:{},
      shareholderTitle: [
        '股东（发起人）',
        '认缴出资金额（万元）',
        '认缴出资时间',
        '认缴出资方式',
        '实缴出资金额（万元）',
        '实缴出资时间',
        '实缴出资方式'
      ],
      shareholderTitle1:[
        '类型',
        '名称',
        '网站'
      ],
      Outbound:[
        '投资设立企业或购买股权企业名称',
        '注册号/统一社会信用代码'
      ],
      params: {},
      shareholderPager: {
        total: 0,
        pageSize: 10,
        pageNum: 1
      },
      number: '',
      entId: ''
    }
  },
  mounted() {
    this.params.entName = this.$route.query.entname
    this.getNumber()
  },
  methods: {
    // 获取企业年报
    getNumber() {
      api.getFindEnterpriseAnnual(this.params).then(rtn => {
        this.message = '暂无数据'
        if (rtn.data) {
          this.tabList = rtn.data
        }
        if (!rtn.data[0]) return
        this.annuaData = rtn.data[0]
        this.annuaInfo.numSize = 0
        this.annuaPropertyAssetInfos.numSize = 0
        if (rtn.data[0].annuaInfo) {
          this.annuaInfo = rtn.data[0].annuaInfo
          if (this.annuaInfo.codeOrRegistationNo || this.annuaInfo.name || this.annuaInfo.enterprisePhone || this.annuaInfo.postCode) {
            this.annuaInfo.numSize = 1
          }
        }
        if (rtn.data[0].annuaShareholderInvestmentInfos) {
          this.annuaShareholderInvestmentInfos = rtn.data[0].annuaShareholderInvestmentInfos
        }
        if (rtn.data[0].annuaWebsiteInfos) {
          this.annuaWebsiteInfos = rtn.data[0].annuaWebsiteInfos
          this.annuaWebsiteInfos.forEach(web => {
            if (web.url) {
              web.hrefUrl = 'http://' + web.url
            }
          })
        }
        if (rtn.data[0].annuaOutInvestmentInfos) {
          this.annuaOutInvestmentInfos = rtn.data[0].annuaOutInvestmentInfos
        }
        if (rtn.data[0].annuaPropertyAssetInfos) {
          this.annuaPropertyAssetInfos = rtn.data[0].annuaPropertyAssetInfos
          if (this.annuaPropertyAssetInfos.totalAssets || this.annuaPropertyAssetInfos.totalOwnersEquity || this.annuaPropertyAssetInfos.totalLiabilities || this.annuaPropertyAssetInfos.grossTradingIncome || this.annuaPropertyAssetInfos.totalProfit || (this.annuaPropertyAssetInfos.mainBusinessIncome && Number(this.annuaPropertyAssetInfos.mainBusinessIncome)) || this.annuaPropertyAssetInfos.netProfit || this.annuaPropertyAssetInfos.totalTaxAmount) {
            this.annuaPropertyAssetInfos.numSize = 1
          } else {
            this.annuaPropertyAssetInfos.numSize = 0
          }
        }
      })
    },
    changenum(num) {
      this.tabList.map(item => {
        item.flag = false
      })
      num.flag = true
      if (!num ||typeof num === 'undefined') {
        this.message = '暂无数据'
        return
      }
      this.annuaData = num
      this.annuaInfo.numSize = 0
      this.annuaPropertyAssetInfos.numSize = 0
      if (num.annuaInfo) {
        this.annuaInfo = num.annuaInfo
        if (this.annuaInfo.codeOrRegistationNo || this.annuaInfo.name || this.annuaInfo.enterprisePhone || this.annuaInfo.postCode) {
          this.annuaInfo.numSize = 1
        } else {
          this.annuaInfo.numSize = 0
        }
      }
      if (num.annuaShareholderInvestmentInfos) {
        this.annuaShareholderInvestmentInfos = num.annuaShareholderInvestmentInfos
      }
      if (num.annuaWebsiteInfos) {
        this.annuaWebsiteInfos = num.annuaWebsiteInfos
        this.annuaWebsiteInfos.forEach(web => {
          if (web.url) {
            web.hrefUrl = 'http://' + web.url
          }
        })
      }
      if (num.annuaOutInvestmentInfos) {
        this.annuaOutInvestmentInfos = num.annuaOutInvestmentInfos
      }
      console.log(num.annuaPropertyAssetInfos)
      if (num.annuaPropertyAssetInfos) {
        this.annuaPropertyAssetInfos = num.annuaPropertyAssetInfos
        if (this.annuaPropertyAssetInfos.totalAssets || this.annuaPropertyAssetInfos.totalOwnersEquity || this.annuaPropertyAssetInfos.totalLiabilities || this.annuaPropertyAssetInfos.grossTradingIncome || this.annuaPropertyAssetInfos.totalProfit || (this.annuaPropertyAssetInfos.mainBusinessIncome && Number(this.annuaPropertyAssetInfos.mainBusinessIncome)) || this.annuaPropertyAssetInfos.netProfit || this.annuaPropertyAssetInfos.totalTaxAmount) {
          this.annuaPropertyAssetInfos.numSize = 1
        } else {
          this.annuaPropertyAssetInfos.numSize = 0
        }
      }
    },
    courtSizeChange() {},
    courtCurrentChange() {

    }
  },
  components: {
    jNoData,
    jTabNav
  }
}
</script>
<style lang="scss" scoped>
.risk-compliance {
  padding: 28px 40px;
  font-size: 14px;
  .blue {
    color: #57ADE7;
  }
  a {
    text-decoration: none;
  }
  .tab {
    width: 1320px;
    background: #fff;
    height: auto;
    line-height: 30px;
    ul {
      width: 100%;
      background: #fff;
      li {
        display: inline-block;
        font-size: 12px;
        height: 20px;
        line-height: 20px;
        font-weight: normal;
        font-stretch: normal;
        color: #069bf7;
        padding: 0px 34px;
        border-radius: 20px;
        position: relative;
        cursor: pointer;
        margin-top: 10px;
        font-size: .09rem;
        &:hover,
        &.selected,
        &:active {
          color: #fff !important;
          background: #069bf7 !important;
        }
        &.router-link-active {
          color: #fff;
            background: #069bf7;
        }
      }
      .tabAlink {
        color: #fff !important;
        background: #069bf7 !important;
      }
    }
  }
  .gray {
    color: #999999 !important;
  }
  .cursor {
    cursor: no-drop;
  }
  .detail-base-title {
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    padding: 30px 0 0 12px;
    position: relative;
    background-image: linear-gradient(0deg,#1891ef,#1891ef);
    background-size: 3px 16px;
    background-position: 0 37px;
    background-repeat: no-repeat;
    border-bottom: 1px solid #eee;
  }
  h4.detail-base-title span {
    border: 1px solid #9dc5fd;
    border-radius: 10px;
    color: #1688f3;
    background: #f2f7ff;
    font-size: 12px;
    padding: 0 10px;
    margin-left: 15px;
    vertical-align: top;
  }
  .table-wrap {
    padding: 30px 20px;
    table {
      border-collapse: collapse;
      width: 100%;
      text-align: center;
      tr:hover {
        background: #f3f8ff;
      }
      td,
      th {
        border: 1px solid #e2e2e2;
        line-height: 40px;
      }
      th {
        line-height: 38px;
        color: #999;
        background: #f2f1f1;
      }
    }
  }
}
</style>



// WEBPACK FOOTER //
// src/view/clib/annualReports.vue